<template>
    <div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Tree from './Tree.vue';

interface Tree {
    name: string;
    checked: boolean;
    children?: Tree[];
}

const data = ref<Tree[]>([
    {
        name: 'root',
        checked: true,
        children: [
            {
                name: 'child1',
                checked: true,
                children: [
                    {
                        name: '1-1',
                        checked: false,
                    },
                ],
            },
            {
                name: 'child2',
                checked: false,
                // children: [
                //     {
                //         name: 'grandchild3',
                //         checked: true,
                //     },
                //     {
                //         name: 'grandchild4',
                //         checked: false,
                //     },
                // ],
            },
            {
                name: 'child3',
                checked: false,
                children: [
                    {
                        name: 'grandchild3',
                        checked: true,
                        children: [
                            {
                                name: 'grandchild3',
                                checked: false,
                                children: [
                                    {
                                        name: 'grandchild4',
                                        checked: false,
                                    }]
                            },
                        ],
                    },
                ],
            },
            {
                name: 'grandchild4',
                checked: false,
            },
        ],
    },
],)

</script>

<style scoped></style>